<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        姓：<input type="text" name="name" v-model="firstname">
        名：<input type="text" name="name" v-model="lastname">
        全名：{{addfn}}
        <br>
        <button @click="updata">11</button>
        <!-- 其他:{{add}} -->

    </div>

    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#app',
            data(){
                return{
                    firstname:"",
                    lastname:""
                }
            },
            //配置项不写在methods中
            computed:{
                addfn:{
                    // console.log('合并的函数');
                    //当计算属性被读取的时候，就会调用get方法，如果计算属性只有get方法则可以直接简介 `计算属性(){return XXX}`
                    get(){
                        console.log('get方法被调用了');
                        return  this.firstname + '-'+this.lastname
                    },
                    set(value){
                        //这里可以接收添加到addfn的值
                        console.log(value,'value');
                        [this.firstname ,this.lastname] = value.split(" ")
                    }
                    
                },

            },
            methods:{
              updata(){
                // console.log(this);这里的Vue上由这个addfn属性
                this.addfn = '刘 德华'
              }     
            }
        })
    </script>
</body>
</html>